<template>
	<div class="myApp">
		<div class="main">
			<el-row>
				<el-col :span="1" class="userList">
					<div class="menu">
						<div class="avatar">
							<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
						</div>
						<div class="chats">
							<i class="el-icon-chat-dot-round"></i>
						</div>
						<div class="top-20" style="font-size:30px;color:#ddd">
							<i class="el-icon-s-custom"></i>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="userList">
					<div class="searchInput">
						<el-input prefix-icon="el-icon-search"  placeholder="搜索"></el-input>
						<el-button icon="el-icon-plus"></el-button>
					</div>
					<div class="mainLeft">
						<div
							class="user"
							v-for="(item,index) in userList"
							:key="index"
							:class="isActiveUser(item, index)"
							@mouseover="cursor = index"
							@mouseleave="cursor = -1"
							@click="userListItem(item)"
						>
							<div class="avatar">
								<el-badge v-if="item.notRead" :value="item.notRead" class="item">
									<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
								</el-badge>
								<el-avatar v-else src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
							</div>
							<div>
								<div style="margin-bottom:10px">昵称：{{ item.name }}</div>
								<!-- <div>{{ item.time }}</div> -->
								<div class="lastMessage">{{ item.lastMessage }}</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="17" class="userList">
					<div class="content">
						<div class="title">
							<div style="margin-left:20px" v-show="activeName">{{ activeName }}</div>
							<div style="margin-right:20px" v-show="activeName">
								<i class="el-icon-more"></i>
							</div>
						</div>
						<div class="messageBox" ref="messageBoxRef">
							<div class="direction">
								<div
									class="chatMessage"
									v-for="(item,index) in nowChatMessageList"
									:key="index"
									:class="item.name == loginName ? 'mySelf' : ''"
								>
									<div class="itemBox">
										<div class="itemName">
											<div class="avatar">
												<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
											</div>
											<div>{{ item.name }}--{{ item.time }}</div>
										</div>
										<div class="message">
											<div class="text">{{ item.message }}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="userInput">
						<div class="major">表情</div>
						<div class="myInput">
							<el-input
								placeholder="请输入"
								@keyup.enter.native="sendBtn()"
								v-model.trim="message"
								type="textarea"
							></el-input>
							<div class="sendBox">
								<el-button class="send" @click="sendBtn()">发送(s)</el-button>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
const check = (items, wanted) => wanted.every(Set.prototype.has, new Set(items));
export default {
	computed: {
		...mapState([
			'userList'
		])
	},
	data() {
		return {
			nowChatMessageList: [],
			nowUser: {},
			newChatUser: {},
			activeName: '',
			cursor: -1,
			message: '',
			loginName: sessionStorage.getItem('userName')
		}
	},
	mounted() {
		this.$socket.emit('user', sessionStorage.getItem('userName'));

	},
	methods: {
		/* 用户列表点击 */
		async userListItem(item) {
			this.activeName = item.name
			this.newChatUser = item

			let res = await new Promise((resolve, reject) => {
				this.$socket.emit('changeChatMessage', this.newChatUser, this.nowUser, (data) => {
					resolve(data)
				});
			})
			this.$refs.messageBoxRef.scrollTop = this.$refs.messageBoxRef.scrollHeight;
		},
		async sendBtn() {
			// this.$socket.send(this.message);
			if (!this.message) return
			if (this.activeName) {
				await new Promise((resolve, reject) => {
					this.$socket.emit('sigleChat', this.newChatUser, this.message, this.nowUser.name, (data) => {
						resolve(data)
					})
				})
				this.$refs.messageBoxRef.scrollTop = this.$refs.messageBoxRef.scrollHeight;
				this.message = ''
			} else {
				this.$message.warning('请先选择聊天用户')
			}

		},
		isActiveUser(item, index) {
			if (this.cursor == index) {
				return 'activeUser'
			} else if (item.name == this.activeName) {
				return 'activeUser'
			} else {
				return ''
			}
		},

	},
	sockets: {
		welcome(data) {
			console.log(data)
		},
		getUserList(data) {
			let list = data.filter(item => {
				if (item.name == this.loginName) this.nowUser = item
				return item.name != this.loginName
			})
			this.$store.commit('setUserList', list)
		},
		sigleMessage(data) {

			let list;
			data?.map(item => {
				let active = check(item.ids, [this.activeName, this.loginName])
				if (active) {
					list = item
				}
			})
			if (!list) return this.nowChatMessageList = []
			console.log(list)
			this.nowChatMessageList = list.messages

			console.log(this.userList)
		},
		/* 添加未读数量 */
		changeNotRead(obj) {

			let user = obj.my
			let message = obj.message
			/* user 为发送者名称 */
			let list = this.userList.map(item => {
				if (item.name == user.name) {
					item.notRead += 1,
						item.lastMessage = message
				}
				return item
			})
			this.$store.commit('setUserList', list)
			console.log(this.userList)
			console.log('改变了')
		},
		/* 清除未阅读数 */
		clearNotRead(chatuser) {
			let list = this.userList.map(item => {
				if (item.name == chatuser.name) {
					item.notRead = 0
				}
				return item
			})
			this.$store.commit('setUserList', list)
		}
	},
	destroyed() {
		this.$socket.emit('closePage', this.nowUser)
	},
}

</script>

<style lang="scss" scoped>
.mySelf {
	justify-content: flex-end;
	.itemBox {
		.message {
			display: flex;
			justify-content: flex-end;

			.text {
				display: flex;
				border: 1px solid rgb(150, 150, 150);
			}
		}
	}
}
.activeUser {
	cursor: pointer;
	background-color: rgb(190, 187, 187);
}
.myApp {
	width: 100%;
	height: 100vh;
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	// border: 1px solid red;
	align-items: center;
	box-sizing: border-box;
	.main {
		border: 1px solid #ddd;
		width: 86%;
		div.userList {
			height: 84vh;
			// height: 500% !important;
			border: 1px solid #ddd;
			box-sizing: border-box;
			.mainLeft {
				background-color: rgb(247, 244, 244);
				height: calc(84vh - 60px);
			}
			.searchInput {
				display: flex;
				padding: 10px;
				height: 60px;
				box-sizing: border-box;
				.el-button {
					margin-left: 20px;
					font-size: 20px;
					height: 40px;
					width: 50px !important;
					text-align: center;
					line-height: 40px;
					padding: 0;
					background-color: rgb(221, 220, 220);
				}
				::v-deep .el-input{
					.el-input__prefix{
						color: rgb(134, 134, 134);
					}
					.el-input__inner{
						background-color: rgb(221, 220, 220) !important;
						&::placeholder{
							color: rgb(134, 134, 134);
						}
					}
					
				}
			}
			.menu {
				background-color: rgb(54, 53, 53);
				height: 84vh;
				display: flex;
				flex-direction: column;
				align-items: center;
				.avatar {
					margin-top: 20px;
					cursor: pointer;
				}
				.chats {
					cursor: pointer;
					margin-top: 20px;
					i {
						background-color: rgb(102, 233, 102);
						font-size: 30px;
					}
				}
			}
			.user {
				display: flex;
				border-bottom: 1px solid #ddd;
				padding: 10px;
				height: 70px;
				box-sizing: border-box;
				.avatar {
					margin-right: 20px;
					cursor: pointer;
				}
				.lastMessage {
					color: rgb(85, 84, 84);
					font-size: 14px;
				}
			}
			.content {
				// height: 550px;
				height: 55vh;
				// border: 1px solid red;
				.title {
					border-bottom: 1px solid #ddd;
					height: 50px;
					line-height: 50px;
					font-size: 20px;
					display: flex;
					justify-content: space-between;
				}
				.messageBox {
					height: calc(55vh - 50px);
					overflow-y: auto;
					// display: flex;
					// border: 1px solid red;
					// justify-content: flex-end;

					.chatMessage {
						padding: 10px;
						display: flex;

						.itemBox {
							.itemName {
								margin-bottom: 5px;
								display: flex;
								align-items: center;
								.avatar {
									cursor: pointer;
									margin-right: 10px;
								}
							}
							.message {
								display: flex;

								.text {
									padding: 10px;
									display: flex;
									border: 1px solid #ddd;
									border-radius: 6px;
									background-color: rgb(107, 243, 107);
									font-family: "Times New Roman", Times, serif;
									position: relative;
									&::before {
										content: "";
										position: absolute;
										width: 0px;
										height: 0px;
										top: -20px;
										left: 50%;
										transform: translateX(-50%);

										border: 10px solid;
										border-color: transparent transparent
											#6bf36b transparent;
									}
								}
							}
						}
					}
				}
			}
			.major {
				height: 36px;
			}
			.userInput {
				// border: 1px solid red;
				height: calc(29vh - 30px);
				.major {
					border: 1px solid #ddd;
				}
				.sendBox {
					display: flex;
					justify-content: flex-end;
					.send {
						margin-top: 2px;
						margin-right: 10px;
						font-size: 18px;
						height: 36px;
						line-height: 36px;
						padding: 0 6px;
					}
				}

				::v-deep .el-textarea__inner {
					// border: 10px solid red;
					min-height: calc(29vh - 76px);
					max-height: calc(29vh - 76px);
					height: calc(29vh - 76px);
					border: none;
					resize: none;
					// height: 140px;
					font-size: 16px;
					color: black;
					/*修改滚动条样式*/
					&::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}
					&::-webkit-scrollbar-track {
						background: rgb(239, 239, 239);
						border-radius: 2px;
					}
					&::-webkit-scrollbar-thumb {
						background: #bfbfbf;
						border-radius: 10px;
					}
					&::-webkit-scrollbar-thumb:hover {
						background: #999;
					}
					&::-webkit-scrollbar-corner {
						background: #179a16;
					}
				}
			}
		}
	}
}
</style>